<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" size="medium" label-position="top" label-width="100px">
      <el-row :gutter="15">
        <el-col :span="6">
          <el-form-item label="销售单号" prop="saleOdd">
            <el-input v-model="form.saleOdd" :disabled="true" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="客户" prop="customerId">
            <el-select filterable v-model="form.customerId" placeholder="请选择">
              <el-option v-for="item in customerOptions" :key="item.customerId" :label="item.customerName"
                :value="item.customerId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="销售日期" prop="saleTime">
            <el-date-picker clearable v-model="form.saleTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="联系人" prop="saleOdd">
            <el-input v-model="form.saleOdd" :disabled="true" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="saleOdd">
            <el-input v-model="form.saleOdd" :disabled="true" placeholder="请输入" />
          </el-form-item>
        </el-col> -->
        <el-col :span="4">
          <el-form-item label="销售人" prop="salePersonId">
            <el-select filterable v-model="form.salePersonId" placeholder="请选择">
              <el-option v-for="item in personOptions" :key="item.userId" :label="item.nickName"
                :value="item.userId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="单据备注" prop="remark">
            <el-input v-model="form.remark" placeholder="请输入单据备注" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="form.detailsList" border>
        <el-table-column label="商品编号" align="center" prop="commodityNo" />
        <el-table-column label="商品名称" align="center" prop="commodityName1" />
        <el-table-column label="商品类别" align="center" prop="commodityTypeName" />
        <el-table-column label="规格" width="80" align="center" prop="commoditySpec" />
        <el-table-column label="单位" width="150" align="center" prop="unitName1" />
        <el-table-column label="换算结果" align="center" prop="unitResult" />
        <el-table-column label="成本价" align="center" prop="costPrice" />
        <el-table-column label="折扣率" width="120" align="center" prop="saleRate" />
        <el-table-column label="数量" width="120" align="center" prop="saleNumber" />
        <el-table-column label="销售单价" width="120" align="center" prop="salePrice" />
        <el-table-column label="小计" align="center" prop="subtotal" />
      </el-table>
      <el-row style="margin-top: 40px;" :gutter="15">
        <el-col :span="6">
          <el-form-item label="物流费用" prop="logisticsCost">
            <el-row>
              <el-col :span="12">
                <el-input v-model="form.logisticsCost" placeholder="请输入物流费用" class="input-with-select">
                </el-input>
              </el-col>
              <el-col :span="12">
                <el-select v-model="form.logisticsMethod" placeholder="请选择">
                  <el-option v-for="item in methodOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="其他费用" prop="otherCost">
            <el-row>
              <el-col :span="12">
                <el-input v-model="form.otherCost" placeholder="请输入其他费用" />
              </el-col>
              <el-col :span="12">
                <el-select v-model="form.otherMethod" placeholder="请选择">
                  <el-option v-for="item in methodOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="应付金额" prop="payAmount">
            <el-input v-model="form.payAmount" placeholder="请输入应付金额" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="附件" prop="attr">
          <file-upload v-model="form.attr" />
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import { getCustomerList } from '@/api/erp/ErpCustomer'
import { getSysUserList } from '@/api/system/user'
import { addErpSale, getErpSale, auditErpSale } from '@/api/erp/ErpSale'
import ErpCommodity from '@/views/erp/ErpCommodity/selectedCommodity'
export default {
  components: {
    ErpCommodity
  },
  props: {
    saleId: {
      type: Number
    }
  },
  dicts: ['erp_procure_batch', 'erp_logistics_stauts'],
  data() {
    return {
      // 分摊方式
      methodOptions: [{
        value: 1,
        label: '按重量分摊'
      }, {
        value: 2,
        label: '按体积分摊'
      }],
      // 采购人列表
      personOptions: [],
      // 商品table loading
      loading: true,
      // 供应商列表
      supplierOptions: [],
      form: {}
    }
  },
  created() {
    this.handleGetListCustomer();
    this.handleGetListSysUser();
    this.getList();
    this.getSaleInfo();
  },
  mounted() {

  },
  methods: {
    // 获取商品列表
    getList() {
      this.loading = false;
    },
    // 获取客户列表
    handleGetListCustomer() {
      getCustomerList().then(res => {
        this.supplierOptions = res.data;
      })
    },
    // 获取用户列表
    handleGetListSysUser() {
      getSysUserList().then(res => {
        this.personOptions = res.data;
      })
    },
    // 获取详情信息
    getSaleInfo() {
      getErpSale(this.saleId).then(response => {
        this.form = response.data;
      });
    },
    // 通过 or 驳回
    handleAuditOptions(type) {
      this.form.saleStatus = type;
      if (type == 3) {
        this.$prompt('', '驳回原因', {
          center: true,
          inputType: 'textarea',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.form.rejectReason = value;
          this.handleAudit();
        })
      } else {
        this.handleAudit();
      }
    },
    handleAudit() {
      auditErpSale(this.form).then(response => {
        this.$modal.msgSuccess("操作成功");
        this.$emit('submit');
      });
    },
    // 取消
    cancel() {
      const obj = { path: "/psi/sale/ErpSale" };
      this.$tab.closeOpenPage(obj);
    },
  }
}

</script>
<style></style>
